<?php echo $this->load->view('header_open.php'); ?>
<link type="text/css" href="<? echo base_url(); ?>css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<script type="text/javascript" src="<? echo base_url(); ?>js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<? echo base_url(); ?>js/jquery-ui-1.7.1.custom.min.js"></script>

<link rel="stylesheet" type="text/css" href="<? echo base_url(); ?>shadowbox/shadowbox.css">
<script type="text/javascript" src="<? echo base_url(); ?>shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
	language: 'es',
	players:  ['img', 'html', 'iframe']
});
</script>
<style type="text/css">
	#category { clear:left; }
	ul.photos{ list-style-type: none; margin: 0; float: left; margin-right: 10px;  background: #eee; padding: 5px; width: 100%;;}
	ul li.photos { margin: 0px 5px 0px 5px; float: left; width: 135px; }
	.ui-state-highlight { height: 75px; }
	
	img{
		border:none;
	}
	
	#photo{
		border:solid 1px #000000;
		background-color:#FFFFFF;
		text-align:left;
		width:125px;
		overflow:hidden;
		padding:5px;
		margin:0px 5px 0px 5px;
	}
	#photo #photo_in{
		float:left;	
	}
	#photo #photo_out{
		float:right;
		overflow:hidden;
	}
	
	#photo #photo_out #move{
		float:left;		
		cursor:move;
	}
	
	#photo #photo_out #view, #photo #photo_out #edit{
		clear:left;
		float:left;
		margin-top:5px;	
	}


	</style>
	<script type="text/javascript">
	$(document).ready(function() {
<?php foreach ($categories as $row):?>
		$("#category_<?php echo $row->category_id; ?>").sortable({
			connectWith: '.photos',
			placeholder: 'ui-state-highlight',
			cursor: 'move',
			handle: '#move',
			update : function () { 
      			var order = $('#category_<?php echo $row->category_id; ?>').sortable('serialize') + '&category_id=<?php echo $row->category_id; ?>&action=change'; 
		      	//$("#info").load("<?php echo site_url('photo/change_position'); ?>", order); 
				$.post("<?php echo site_url('photo/change_position'); ?>", order, function(theResponse){
				$("#info").html(theResponse);
			}); 
    	}
		}).disableSelection();
<?php endforeach; ?>
	});
	



	</script>
<?php echo $this->load->view('header_close.php'); ?>

<h3>Photo list</h3>
<?
$path = base_url().'data/photo/';
foreach ($categories as $a){
	echo '<div id="category"><h2>'.$a->name.'</h2>';
	echo '<ul id="category_'.$a->category_id.'" class="connectedSortable">';
	$i = 0;
	foreach ($photos as $b)
	{
		if($b->category_id == $a->category_id){
			$i++;
			echo '<li id="item_'.$b->photo_id.'">';
			echo '<div id="photo"><div id="photo_in">'.
				//'<a href="'.$path.$b->photo_id.'.jpg" rel="shadowbox['.$b->category_id.']" title="'.$b->name.'">'.
				'<img src="'.$path.$b->photo_id.'_thumb.jpg" title="'.$b->name.'" /></div>';
				//'</a>';
			echo '<div id="photo_out">';
			echo '<div id="move"><img src="'.base_url().'img/view-fullscreen.png" title="Move" alt="Move" /></div>';
			echo '<div id="view">'.
				'<a href="'.$path.$b->photo_id.'.jpg" rel="shadowbox" title="'.$b->name.'">'.
				'<img src="'.base_url().'img/edit-find.png" /></div>'.
				'</a>';
			echo '<div id="edit"><a rel="shadowbox;height=140;width=120;player=iframe" href="'.site_url('photo/edit').'" title="Edit"><img src="'.base_url().'img/format-justify-fill.png" title="Edit" alt="Edit" /></a></div>';
			echo '</div>';
			echo '</div>';
			echo '</li>';
			?>
			<!--form action="<? echo site_url('photo/change_category'); ?>" method="post">
            <input type="hidden" name="photo_id" value="<? echo $b->photo_id ?>" />
            <select name="category_id">
<?
foreach ($categories as $row)
{
    echo '<option value="'.$row->category_id.'"';
	if($row->category_id == $a->category_id)
		echo ' selected="selected"';
	echo '>'.$row->name.'</option>\n';
}
?>
			<input type="submit" value="Cambiar categoría" />
            </form-->
			<?
		}
	}
	echo "</ul></div>";
}
?>
<?php echo $this->load->view('footer.php'); ?>
